<template>
  <div class="count">
    <h2>{{ sumStore.title }}</h2>
    <h2>{{ sumStore.desc }}</h2>
    <h2>当前求和为：{{ sumStore.sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="minus">减</button>
    <br/>
    <button @click="changeTitle">修改title</button>
  </div>
</template>

<script setup lang="ts" name="Count">
  import { ref } from "vue";
  import { useCountStore } from "@/store/Count";
  // 数据
  let sumStore = useCountStore()
  let n = ref(1) // 用户选择的数字

  // 方法
  function add(){
    sumStore.sum += n.value
  }
  function minus(){
    sumStore.sum -= n.value
  }
  function changeTitle() {
    // 第一种修改方式，直接修改
    /* sumStore.title = '这是修改后的标题'
    sumStore.desc = '这是修改后的内容描述' */

    // 第二种修改方式，使用patch
    /* sumStore.$patch({
      sum: 100,
      title: '这是修改后的标题',
      desc : '1111111111111111'
    }) */

    // 第三张修改方式，使用Action，可以加一些业务逻辑
    sumStore.changeSumAndTitle(n.value)
  }
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>